<template>
  <div class="super-search-page">
    <div class="tool">
      <div class="left">
        <slot name="tool"></slot>
      </div>
      <a-button v-if="hasCustomField" type="primary" @click="showCustomConfigHandle"><setting-outlined /></a-button>
    </div>
    <vxe-table
      v-bind="attrs"
      :scroll-x="scrollX"
      :scroll-y="scrollY"
      show-header-overflow
      :show-overflow="showOverflow"
      class="mytable-scrollbar"
      align="center"
      border="full"
      :column-config="{ resizable: true }"
      ref="xTable"
      :row-config="{ ...configExtend.rowConfig, ...rowConfig }"
      :sort-config="{ trigger: 'cell', ...sortConfig }"
      @cell-dblclick="cellDbClickHandle"
    >
      <vxe-column type="seq" width="45" fixed="left"></vxe-column>
      <!-- 此处必须使用 index 作为 key 值的一部分、否则会出现数据变更 试图不更新的问题（单纯顺序改变、key值是不变的、导致模板复用） -->
      <template v-for="(item, index) in showFieldColumn">
        <vxe-colgroup v-if="item.children && item.children.length" :key="index" v-bind="item">
          <vxe-column v-for="child in item.children" :key="child.field" v-bind="child">
            <!-- 自定义表头 -->
            <template v-if="child.headerSlot" #header="slotProps">
              <slot :name="child.headerSlot" v-bind="slotProps"></slot>
            </template>
            <!-- 自定义模板 -->
            <template v-if="child.renderSlot" #default="slotProps">
              <slot :name="child.renderSlot" v-bind="slotProps"></slot>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-column v-else :key="`${item.field}`" v-bind="item">
          <!-- 自定义表头 -->
          <template v-if="item.headerSlot" #header="slotProps">
            <slot :name="item.headerSlot" v-bind="slotProps"></slot>
          </template>
          <!-- 自定义模板 -->
          <template v-if="item.renderSlot" #default="slotProps">
            <slot :name="item.renderSlot" v-bind="slotProps"></slot>
          </template>
        </vxe-column>
      </template>
    </vxe-table>
    <a-pagination
      v-if="hasPagination"
      class="pagination"
      v-model:current="page"
      v-model:page-size="limit"
      @change="changePageHandle"
      :page-size-options="pageSizeOptions"
      size="small"
      :total="total"
      :show-total="(total: number) => `共 ${total} 条`"
      show-size-changer
      show-quick-jumper
    />
    <div class="footer">
      <slot name="footer"></slot>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :activeKey="activeKey"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        v-model:pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
      ></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import CustomListFields from "./components/customListFields/index.vue";
export default {
  name: "SuperTable",
  components: {
    CustomListFields
  }
};
</script>
<script lang="ts" setup>
import { SettingOutlined } from "@ant-design/icons-vue";
import { GeneraDataType } from "@/interface";
import { ref, toRefs, useAttrs, watch } from "vue";
import InitHook from "./composables/initHook";
import CommonHook from "@/hook/commonHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    column: Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>;
    scrollX?: GeneraDataType;
    scrollY?: GeneraDataType;
    showOverflow?: any;
    rowConfig?: GeneraDataType;
    sortConfig?: GeneraDataType;
    total?: number;
    page?: number;
    limit?: number;
    hasPagination?: boolean;
    activeKey?: string;
    hasCustomField?: boolean;
    async?: boolean;
    mode?: SuperTable.Mode;
  }>(),
  {
    scrollX: () => ({
      gt: 20,
      enabled: true,
      oSize: 10 // scrollToLeftOnChange: true
    }),
    scrollY: () => ({
      gt: 35,
      enabled: true // scrollToLeftOnChange: true
    }),
    showOverflow: "title",
    rowConfig: () => ({
      height: 36,
      isCurrent: true
    }),
    hasPagination: true,
    hasCustomField: true,
    activeKey: "",
    async: false,
    mode: "list"
  }
);
const emit = defineEmits<{
  (e: "changePage", page: number, limit: number): void;
  (e: "update:page", page: number): void;
  (e: "update:limit", limit: number): void;
}>();
const attrs = useAttrs();
const { copyText } = CommonHook();
const { mode, async, page, total, limit, column, scrollX, scrollY, showOverflow, rowConfig, hasPagination, sortConfig, activeKey, hasCustomField } = toRefs(props);
const { configExtend, xTable, drawerOpts, init, showFieldColumn, fieldColumn } = InitHook({ column, activeKey, mode });
const { drawerSubmitHandle, showCustomConfigHandle } = OperationHook({ drawerOpts, emit, fieldColumn });
const changePageHandle = (page: number, pageSize: number) => {
  emit("update:page", page);
  emit("update:limit", pageSize);
  emit("changePage", page, pageSize);
};
//分页数量
const pageSizeOptions = ref<string[]>(["10", "20", "50", "100", "500", "1000"]);
const cellDbClickHandle = ({ $event }: GeneraDataType) => {
  const text = $event.target.innerText || "";
  copyText(text);
};
defineExpose({
  xTable
});
if (!async.value) init();
watch(
  () => activeKey.value,
  () => {
    init();
  }
);
watch(
  () => async.value,
  () => {
    init();
  }
);
</script>
<style lang="stylus" scoped>
.super-search-page{
  position: relative;
  .tool{
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    :deep(.ant-btn){
      margin-right: 8px;
    }
  }
  .submit-btn{
    margin-right: 16px;
  }
  .pagination{
    padding: 8px 0;
    text-align: right;
  }
  .footer{
    position: absolute;
    bottom: 10px;
  }


  .mytable-scrollbar {
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
  }

}
</style>
